require('../css/login.less')
require("../fonts/iconfont.css")

let register=document.querySelector(".register");
//获取账号
let account=document.querySelector("#account");
//获取密码
let cypher=document.querySelector("#cypher");
//获取提示框
let hint=document.querySelector(".hint");
//获取登录按钮
let enter=document.querySelector("#enter");

let accountFlag=false;
let cypherFlag=false;

//点击跳转
register.addEventListener("click",function(){
    location.href='./enroll.html'
})

//验证手机号
account.addEventListener("blur",function(){
    let reg=/^1[3-9]\d{9}$/;
    let bool=reg.test(account.value);
    if(bool){
       account.style.border="1px solid green";
       hint.innerHTML=""
       accountFlag=true;
    }else{
       account.style.border="1px solid red";
       hint.innerHTML="*账号错误！"
       hint.style.color="red";
       accountFlag.false;
    }
 })

 //验证密码
cypher.addEventListener("blur",function(){
    let reg=/^[a-zA-Z]\w{2,9}$/;
    let bool=reg.test(cypher.value);
    if(bool){
       cypher.style.border="1px solid green";
       hint.innerHTML=""
       cypherFlag=true;
    }else{
       cypher.style.border="1px solid red";
       hint.innerHTML="*密码错误！"
       hint.style.color="red";
       cypherFlag=false;
    }
 })

 enter.addEventListener("click",function(event){
   //获取焦点
   account.focus();
   cypher.focus();

   //失去焦点
   account.blur();
   cypher.blur();

let bool=accountFlag&&cypherFlag;
// console.log(accountFlag,code1Flag,cypherFlag,cypher2Flag);
console.log(bool);

if(bool){
   window.$http.post('/users/login',{
      account:account.value,
      password:cypher.value
   
   },function(res){
      console.log(res);
      if(res.status===0){
         window.localStorage.setItem('token',res.data.token);
         window.localStorage.setItem('user',JSON.stringify(res.data.user))
         //把响应的结果进行动态展示，并在回调函数中跳转页面
         window.$utils.toast(res.status,res.msg,function(){
            location.href='./index.html'
         });

      }else{
         hint.innerHTML="账号或密码错误"
         hint.style.color="red";
      }
   })
}else{
   event.preventDefault(); 
   hint.innerHTML="*"
   hint.style.color="red";
}
})